<template>
    <div class="counter">
        <button data-event="click,decrement">-</button>
        <span>Count: {{a.count}}</span>
        <span>Name: {{name.value}}</span>
        <button data-event="click,increment">+</button>
    </div>
    <button data-event="click,reset">Reset</button>
</template>
<script type="module">
    export default function () {
        // 响应式状态
        let a = this.reactive({
            count: 0,
        });
        // 响应式引用
        let name = this.ref('kmin');

        // 增加
        this.increment = () => {
            a.count++;
            console.log(a.count)
        }
        // 减少
        this.decrement = () => {
            a.count--;
            console.log(a.count)
        }
        // 重置
        this.reset = () => {
            a.count = 0;
        }
    }
</script>
<style>
    span {
        color: red;
    }
</style>